<template>
  <div id="all" v-if="show_main_color_flag">
    <div id="member">
      <c-title :hide="false" text="门店中心"></c-title>
      <div class="header" >
        <div class="user">
          <div class="user-head">
            <img :src="store.thumb" />
          </div>
          <div class="cashier-name">
            <div style="font-size: 1rem;">{{ store.name }}</div>
            <div style="font-size: 0.75rem;" v-if="status">
              <span>有效期：{{ store.validity }}</span>
              <span class="right_youxiao" @click="getCash">续费</span>
            </div>
          </div>
          <div class="store-state" @click="store_popup">{{ store.operating_state == 0 ? '营业中' : '休息中' }}
            <span class="top"></span>
            <span class="bottom"></span>
          </div>
        </div>
      </div>

    </div>
    <div id="ewm" ref="hook" @click="openQrCode('none')">
      <div class="pic">
        <img :src="poster" alt="" />
      </div>
    </div>
    <div id="jpg"></div>

    <div style="position: relative; top: -2.8125rem;">


      <div class="item">
        <div class="flex space-around">
          <router-link v-if="frontend_goods_manager" :to="
            fun.getUrl('CommodityManagement', {
              store_id: store.store_id,
              store: 'store'
            })
          ">
            <div class="store-center">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/goods.png" alt="">
              <p>商品管理</p>
            </div>
          </router-link>
          <router-link v-if="my_store_order" :to="fun.getUrl('storeOrderlist', { status: '0', orderType: 'store' })">
            <div class="store-center">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/order.png" alt="">
              <p>门店订单</p>
            </div>
          </router-link>
          <router-link :to="fun.getUrl('presentationRecord', {}, { from: 'store' })">
            <div class="store-center">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/commission.png"
                alt="">
              <p>门店收入</p>
            </div>
          </router-link>
          <router-link :to="fun.getUrl('withdrawal')">
            <div class="store-center">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/withdraw.png" alt="">
              <p>{{ this.fun.initWithdrawal() }}</p>
            </div>
          </router-link>
        </div>
      </div>

      <div class="item number_List">
        <!--  数据分列，只有一个时横排显示 -->
        <template v-if="store_income.length > 1">
          <div class="lis" v-for="(item, i) in store_income" :key="i" @click.stop="pluginGoto(item)">
            <div class="top"><template v-if="item.isPrice">￥</template>{{ item.value }}</div>
            <div class="txt">{{ item.name }} <template v-if="item.url">></template></div>
          </div>
        </template>
        <template v-else-if="store_income.length === 1">
          <div class="lis flex-j-sb" style="margin: 0;" v-for="(item, i) in store_income" :key="i" @click.stop="pluginGoto(item)">
            <div class="txt">{{ item.name }}</div>
            <div class="top" style="margin: 0;"><template v-if="item.isPrice">￥</template>{{ item.value }}</div>
          </div>
        </template>
      </div>

      <!-- 成交额  -->
      <div class="item">
        <div>
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div style="text-align: left; align-items: center;" class="flex">
              <span style="margin-right: 0.2188rem;">成交额</span>
              <img style="margin: 0; width: 0.75rem; height: 0.75rem;"
                src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/turnover.png" />
            </div>
            <div class="time">
              <span v-for="(item, i) in turnover_time" :key="i" @click="turnover_handle(i)"
                :class="{ 'current_time': i == turnover_time_index }">{{ item }}</span>
            </div>
          </div>
          <p style="color: #28b2fa; font-size: 1.125rem; text-align: left; font-weight: bold; margin: 0.5rem 0 0.75rem;">{{details.turnover}}
          </p>
          <div style="display: flex; justify-content: space-between;">
            <div class="flex-direction-colunm flex">
              <span class="c-999">已支付订单数</span>
              <span class="font-bold">{{ details.payed_order }}</span>
            </div>
            <div class="flex-direction-colunm flex">
              <span class="c-999">下单人数</span>
              <span class="font-bold">{{ details.submit_order }}</span>
            </div>
            <div class="flex-direction-colunm flex">
              <span class="c-999">支付人数</span>
              <span class="font-bold">{{details.number_of_payers}}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据统计  -->
      <div class="item data-statistics">
        <div class="title" style="display: flex; align-items: center;">
          <span style="margin-right: 0.2188rem;">数据统计</span>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/total.png"
            style="margin: 0; width: 0.75rem; height: 0.75rem;" />
        </div>
        <div style="padding: 0.75rem 0.65rem;">
          <div class="data-statistics-item">
            <div class="statistice-info">
              <span class="c-999">累计实收金额</span>
              <span class="font-bold">{{ details.money_total }}</span>
            </div>
            <div class="statistice-info">
              <span class="c-999">可{{ this.fun.initWithdrawal() }}金额</span>
              <span class="font-bold">{{ details.sure_withdraw_money }}</span>
            </div>
            <div class="statistice-info">
              <span class="c-999">待支付订单</span>
              <span class="font-bold">{{details.wait_pay_order}}</span>
            </div>
          </div>
          <div class="data-statistics-item">
            <div class="statistice-info">
              <span class="c-999">待发货订单</span>
              <span class="font-bold">{{details.wait_send_order}}</span>
            </div>
            <div class="statistice-info">
              <span class="c-999">售后订单</span>
              <span class="font-bold">{{details.refund_order}}</span>
            </div>
            <div class="statistice-info">
              <span class="c-999">在售商品数</span>
              <span class="font-bold">{{details.on_sale_goods}}</span>
            </div>
          </div>
          <div style="display: flex;">
            <div>
              <p class="c-999">下架商品数</p>
              <p class="font-bold">{{details.shelve_goods}}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 店铺管理  -->
      <div class="item">
        <p class="title">店铺管理</p>
        <div style="display: flex; flex-wrap: wrap;">
          <router-link :to="fun.getUrl('GoodsClassify', { store_id: store.store_id })" tag="div" class="item-box">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/category.png" />
            <span>商品分类</span>
          </router-link>
          <router-link :to="fun.getUrl('CommodityCoupon', { store_id: store.store_id })" tag="div" class="item-box">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/coupon.png" />
            <span>优惠券管理</span>
          </router-link>
          <div class="item-box" @click="toMyStore" v-if="store.my_shop_show">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/store.png" />
            <span>我的门店</span>
          </div>
          <router-link :to="fun.getUrl('collectionCode', {store_id: store.store_id})" tag="div" class="item-box" v-if="is_open_code">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/proceeds_code.png" />
            <span>收款二维码</span>
          </router-link>
          <router-link :to="fun.getUrl('qrCode', { store_id: store.store_id })" tag="div" class="item-box">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/sotre_code.png" />
            <span>门店二维码</span>
          </router-link>
          <div class="item-box" @click="toNear" v-if="nearby">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/goods_nearby.png" />
            <span>门店附近推荐商品</span>
          </div>
          <router-link :to="fun.getUrl('presentationRecord', {}, { from: 'storeBalance' })"  tag="div" class="item-box"
            v-if="show_store_balance_award">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/balance.png" />
              <span>门店余额充值提成</span>
          </router-link>
          <div class="item-box" @click.stop="gotoStoreGroup" v-if="store.is_fight_groups">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/store_group.png" />
            <span>门店拼团</span>
          </div>
          <div class="item-box" v-if="zkzStatus" :to="fun.getUrl('zkzDevice')">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/zkc.png" />
            <span>zkc扫码设备</span>
          </div>
          <router-link v-if="cloudHornStatus" :to="fun.getUrl('cloudHorn')" tag="div" class="item-box">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/cloud_horn.png" />
              <span>云喇叭</span>
          </router-link>
          <router-link v-if="store && store.store_cloud_stock == 1" :to="fun.getUrl('cloudStock')" tag="div" class="item-box">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cloud-stock/sotre_inventory.png" />
              <span>门店云库存</span>
          </router-link>
          <router-link v-if="order_survey" :to="fun.getUrl('storeOrder')" tag="div" class="item-box">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store/overview.png" />
              <span>订单概况</span>
          </router-link>
          <router-link :to="fun.getUrl('share_chain_index')" tag="div" class="item-box" v-if="is_share_chain">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/share_chain%2Fshare_chain_index.png" />
              <span>{{is_share_chain_name}}</span>
          </router-link>
          <router-link :to="fun.getUrl('storeAppointment')" tag="div" class="item-box" v-if="show_management">
            <i class="iconfont icon-mendianyuyueshangpin"></i>
            <span>门店预约商品</span>
          </router-link>
          <div @click="toRecord" tag="div" class="item-box" v-if="deduct_return_open">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin%2Fstore%2Fstore-order.png" />
              <span>{{deduct_return_name}}</span>
          </div>
        </div>
      </div>

    </div>




    <van-popup round v-model="show" position="bottom">
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem;">
        <span style="color: #999; font-size: 0.75rem;" @click="show = false">取消</span>
        <span style="font-weight: bold; font-size: 0.9375rem;">门店状态</span>
        <span style="font-size: 0.75rem;" @click="storeStateSwitch">确认</span>
      </div>
      <div style="padding: 1.2188rem 1.25rem 0.75rem 0.75rem;">
        <van-radio-group v-model="store_state">
          <van-radio :name="0" class="mb-20">营业</van-radio>
          <van-radio :name="1">休息</van-radio>
        </van-radio-group>

      </div>
    </van-popup>
  </div>
</template>

<script>
import store_manage_controller from './store_manage_controller';
export default store_manage_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/css/cashier.scss";

#all {
  padding-bottom: 0.625rem;
}

.van-radio-group .van-radio {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.mb-20 {
  margin-bottom: 1.25rem;
}

.store-state {
  position: relative;
  height: 1.5rem;
  line-height: 1.5rem;
  padding-left: 0.75rem;
  padding-right: 1.375rem;
  border-radius: 0.25rem;
  margin-top: 0.3125rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.39);

  .top {
    position: absolute;
    right: 0.7rem;
    top: 34%;
    transform: rotate(-45deg);
    width: 0.45rem;
    height: 0.45rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
}

.font-bold {
  font-weight: bold;
}

.space-around {
  justify-content: space-around;
}

.store-center {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    margin: 0;
    width: 2.5rem;
    height: 2.5rem;
  }
}

.flex {
  display: flex;
}

.flex-direction-colunm {
  flex-direction: column;
}

.current_time {
  color: #fff !important;
  background: var(--themeBaseColor);
}

.c-999 {
  color: #999;
}

.data-statistics {
  .data-statistics-item {
    display: flex;
    justify-content: space-between;
  }

  .statistice-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.75rem;
  }
}

.item {
  margin: 0 0.75rem 0.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #fff;

  .time {
    display: flex;
    overflow: hidden;

    span {
      position: relative;
      color: var(--themeBaseColor);
      padding: 0.25rem 0.75rem;

      &:not(:last-child)::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        top: 0;
        right: 0;
        background: var(--themeBaseColor);
      }
    }

    border-radius: 8px;
    border: 1px solid var(--themeBaseColor);
  }

  .title {
    text-align: left;
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
    font-weight: bold;
  }

  .item-box {
    width: 4.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.2rem 1.5rem;
    font-size: 0.75rem;
    .icon-mendianyuyueshangpin{
      font-size: 1.5rem;
      margin: 0;
      margin-bottom: 0.25rem;
    }
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 0 0 0.25rem;
    }
  }
}

i:first-child {
  margin-right: 0.375rem;
  color: #f15353;
  font-size: 18px;
}

.list1 .icon-fontclass-mendianpintuan {
  font-size: 24px;
}

.clearfix {
  clear: both;
}

.youxiao {
  left: 0;
  top: 11.13rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23.44rem;
  height: 2.5rem;
  line-height: 1.25rem;
  background-color: rgba(244, 118, 119, 1);
  text-align: center;
}

.storesState {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  padding-right: 1px;
  padding-left: 16px;
  margin-bottom: 8px;
}

.left_youxiao {
  .tian {
    left: 4.06rem;
    top: 11.63rem;
    width: 5.44rem;
    height: 1.31rem;
    color: rgba(255, 255, 255, 1);
    font-size: 0.81rem;
    text-align: left;
    margin-right: 5rem;
  }
}

.right_youxiao {
  margin-left: 0.25rem;
  padding: 0.0938rem 0.375rem;
  background-color: #fff;
  color: var(--themeBaseColor);
  border-radius: 0.5313rem;
  // display: flex;
  // justify-content: center;
  // align-items: center;

  // span {
  //   left: 17.56rem;
  //   display: block;
  //   top: 11.56rem;
  //   width: 4.38rem;
  //   height: 1.5rem;
  //   line-height: 1.5rem;
  //   border-radius: 0.81rem;
  //   background-color: rgba(241, 83, 83, 1);
  //   color: rgba(255, 255, 255, 1);
  //   font-size: 14px;
  //   text-align: center;
  // }
}

::v-deep .van-tabs__nav--card {
  width: 105px;
}

.number_List {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  border-radius: 0.31rem;
  flex-wrap: wrap;
  .headTitle {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    padding: 0.5rem 1rem;
  }
  .lis {
    flex: 1;
    margin: 0.5rem 0;
    min-width: 33%;
    .top {
      font-size: 0.88rem;
      color: #3b3b4a;
      margin-bottom: 0.375rem;
      font-weight: bold;
    }
    .txt {
      color: #aaaab3;
      font-size: 0.75rem;
    }
  }
  .lis_right {
    border-right: 1px solid #e7e7e7;
  }
  .lis:last-child {
    border-right: 0;
  }
}
</style>
